import React, { useMemo } from "react";
import { router, MyRouter } from "../../../router";
import { NavLink, Outlet } from "react-router-dom";
type propsTypes = {};

function Contente(props: propsTypes) {
  const homeChild = useMemo(() => router.find((item: MyRouter) => item.name === "首页")?.children || [], [router]);
  //   console.log(homeChild,"-----homeChild");
  return (
    <div className="w-full">
      <div className="flex border-b">
        {homeChild?.map((item) => {
          return (
            <NavLink
              className={({ isActive }) => {
                return `${isActive ? "text-blue-500 font-semibold" : "text-black"} p-3 px-5`;
              }}
              key={item.path}
              to={item.path || "/"}
            >
              {item.name}
            </NavLink>
          );
        })}
      </div>
      <Outlet />
    </div>
  );
}

export default Contente;
